<template>
  <div class="content pt20">
    <el-empty v-if="columns.every(item => item.length <= 0)" description="这里暂时什么都没有" style="width: 100%"></el-empty>

    <template v-else>
      <div v-for="(column, index) in columns" :key="'column-' + index" class="column">
        <div v-for="item in column" :key="item.liveUrl" class="item">
          <div class="imgdiv">
            <video v-if="item.liveType === 2" controls style="width: 100%; height: auto; vertical-align: middle">
              <source :src="item.liveUrl" type="video/mp4" />
              对不起，您的浏览器不支持播放视频文件
            </video>
            <template v-else>
              <img
                v-if="item.liveType === 3"
                :class="{ 'vr-img': item.liveType === 3 && item.vrUrl }"
                :src="item.liveUrl"
                :alt="item.title"
                @click="openVr(item)"
              />
              <el-image
                v-if="item.liveType !== 3"
                :class="{ 'vr-img': item.liveType === 3 && item.vrUrl }"
                :src="item.liveUrl"
                :alt="item.title"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[item.liveUrl]"
                :initial-index="4"
                fit="cover"
              />
            </template>
            <div class="imgVRcenter" v-if="item.liveType === 3" @click="openVr(item)">
              <div class="imgVRcenter_text">VR</div>
            </div>
            <img
              :src="require('@/assets/images/showclose.png')"
              style="width: 40px; height: 71px"
              class="imgpicture"
              v-if="item.iconType === 3"
            />
            <img
              :src="require('@/assets/images/showzidong.png')"
              style="width: 40px; height: 71px"
              class="imgpicture"
              v-if="item.iconType === 2"
            />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive, watch } from "vue";
const columns = ref([[], [], [], []]);

const props = defineProps({
  postData: {
    type: Object
  }
});

watch(
  () => props.postData,
  val => {
    // 分组逻辑：将图片根据其索引分配到不同列
    console.log("实拍图===", val);
    val?.businessProductLiveList?.forEach((item, index) => {
      const columnIndex = index % 4;
      columns.value[columnIndex].push(item);
    });
    console.log(
      "实拍图222222222222===",
      columns.value,
      columns.value.every(item => item.length <= 0)
    );
  },
  { deep: true, immediate: true }
);

const openVr = item => {
  if (item.liveType === 3 && item.vrUrl) {
    //如果是vr，点击打开一页链接页签
    window.open(item.vrUrl, "_blank", "width=1200,height=600");
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-image) {
  display: block;
}
.content {
  display: flex;
  justify-content: space-between;
}
.column {
  width: calc(25% - 16px); /* 四分之一宽减去间隙补偿 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 列内元素间距 */
}

.item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  img {
    width: 100%; /* 图片占满容器宽度 */
    height: auto; /* 高度自适应图片比例 */
    display: block;
  }

  .vr-img {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    &:hover {
      transform: scale(1.1);
      transition: all 0.2s ease-in-out;
    }
  }
}
.imgdiv {
  position: relative;
}
.imgpicture {
  position: absolute;
  top: -3px;
}
.imgVRcenter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  opacity: 1;
  background: rgba(121, 121, 121, 0.5);
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ffffff;
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .imgVRcenter_text {
    width: 44px;
    height: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 32px;
    color: #ffffff;
    line-height: 18px;
    text-align: center;
  }
}
.imgcenter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
